<html lang="en">
<body>
<style>
    body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #1a1a1a;
        font-family: Arial, sans-serif;
    }
    .container {
        text-align: center;
        max-width: 800px;
        padding: 20px;
    }
    .logo-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }
    .logo-svg {
        width: 100px;
        height: 100px;
        margin-right: 20px;
    }
    .logo-text {
        font-size: 32px;
        font-weight: bold;
        color: #4CAF50;
    }
    .title {
        font-size: 36px;
        color: #ffffff;
        margin-bottom: 10px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out 1s forwards;
    }
    .subtitle {
        font-size: 18px;
        color: #cccccc;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease-out 1.5s forwards;
    }
    .features {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
    }
    .feature {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        padding: 10px;
        margin: 5px;
        font-size: 14px;
        color: #ffffff;
        opacity: 0;
        animation: fadeIn 0.5s ease-out forwards;
    }
    .button {
        display: inline-block;
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        margin-top: 20px;
        border-radius: 5px;
        text-decoration: none;
        font-size: 16px;
        transition: background-color 0.3s;
        opacity: 0;
        animation: fadeIn 0.5s ease-out 3s forwards;
    }
    .button:hover {
        background-color: #45a049;
    }
    .github-link {
        color: #cccccc;
        text-decoration: none;
        margin-top: 10px;
        display: inline-block;
        opacity: 0;
        animation: fadeIn 0.5s ease-out 3.5s forwards;
    }
    .github-link:hover {
        text-decoration: underline;
    }
    .carousel {
        width: 100%;
        max-width: 800px; /* Increased width */
        height: 500px; /* Increased height */
        margin: 20px auto;
        position: relative;
        overflow: hidden;
    }
    .carousel-inner {
        width: 600%;
        height: 100%;
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .carousel-item {
        width: 16.67%;
        height: 100%;
    }
    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        text-decoration: none;
        font-size: 18px;
    }
    .carousel-control.prev { left: 10px; }
    .carousel-control.next { right: 10px; }
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes fadeIn {
        to { opacity: 1; }
    }
</style>

<div class="container">
    <div class="logo-container">
        <svg class="logo-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#4CAF50" stroke-width="5">
                <animateTransform
                        attributeName="transform"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="3s"
                        repeatCount="indefinite"
                />
            </circle>
            <path d="M30 50 L70 50 M50 30 L50 70" stroke="#4CAF50" stroke-width="5" stroke-linecap="round">
                <animate
                        attributeName="stroke-dasharray"
                        values="0 100; 100 100"
                        dur="2s"
                        repeatCount="indefinite"
                />
            </path>
        </svg>
        <div class="logo-text">jar-analyzer</div>
    </div>
    <h1 class="title">Jar Analyzer</h1>
    <p class="subtitle">一个JAR包分析工具</p>

    <div class="carousel">
        <div class="carousel-inner">
            <div class="carousel-item">
                <img src="001.png">
            </div>
            <div class="carousel-item">
                <img src="002.png">
            </div>
            <div class="carousel-item">
                <img src="003.png">
            </div>
            <div class="carousel-item">
                <img src="004.png">
            </div>
            <div class="carousel-item">
                <img src="005.png">
            </div>
            <div class="carousel-item">
                <img src="006.png">
            </div>
        </div>
        <a href="#" class="carousel-control prev">&lt;</a>
        <a href="#" class="carousel-control next">&gt;</a>
    </div>

    <div class="features">
        <div class="feature">SCA漏洞分析</div>
        <div class="feature">批量分析JAR包</div>
        <div class="feature">方法调用关系搜索</div>
        <div class="feature">字符串搜索</div>
        <div class="feature">Spring组件分析</div>
        <div class="feature">CFG程序分析</div>
        <div class="feature">JVM栈帧分析</div>
        <div class="feature">进阶表达式搜索</div>
        <div class="feature">反编译JAR包一键导出</div>
        <div class="feature">一键提取序列化数据恶意代码</div>
    </div>
    <a href="https://github.com/jar-analyzer/jar-analyzer/releases" class="button">开始使用</a>
    <br>
    <a href="https://github.com/jar-analyzer/jar-analyzer" class="github-link" target="_blank">
        GitHub 仓库
    </a>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const features = document.querySelectorAll('.feature');
        features.forEach((feature, index) => {
            feature.style.animationDelay = `${2 + index * 0.1}s`;
        });
        const carousel = document.querySelector('.carousel-inner');
        const prevBtn = document.querySelector('.carousel-control.prev');
        const nextBtn = document.querySelector('.carousel-control.next');
        let currentSlide = 0;
        const totalSlides = 6;
        function showSlide(index) {
            carousel.style.transform = `translateX(-${index * (100 / totalSlides)}%)`;
        }
        prevBtn.addEventListener('click', (e) => {
            e.preventDefault();
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(currentSlide);
        });
        nextBtn.addEventListener('click', (e) => {
            e.preventDefault();
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        });
        setInterval(() => {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }, 5000);
        setTimeout(() => {
            console.log('Jar Analyzer Load');
        }, 5000);
    });
</script>
</body>
</html>